<?xml version="1.0" encoding="UTF-8"?>
<!--
  Created by IntelliJ IDEA.
  User: azim
  Date: 5/26/13
  Time: 10:46 AM
-->
<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
        >

<ui:composition template="templates/template.xhtml">

    <ui:define name="title">Category View Page</ui:define>

    <ui:define name="cbody">

        <div>

            <div style="float: right;padding-right: 20px; width: 15%">

                <p:graphicImage width="150"
                                height="150"
                                value="#{mediaFileController.mediaFile}"
                                alt="Podcast Album Art.">

                    <f:param name="id" value="#{podcastController.podcast.albumArt.id}"/>

                </p:graphicImage>

            </div>

            <div style="width: 80%">

                <h2><p:outputLabel value="#{podcastController.podcast.name}"/></h2>

                <p style="font-size: 12px;">

                    By&nbsp;&nbsp;
                        <span style="font-weight: bold">
                            <p:outputLabel value="#{podcastController.podcast.user.username}"/>
                        </span>
                    &nbsp;&nbsp;In&nbsp;&nbsp;
                        <span style="font-weight: bold">
                            <p:outputLabel value="#{podcastController.podcast.category.name}"/>
                        </span>

                </p>

                <br/>

                <h4>Description : </h4> <br/>
                <p:panel>
                    <h:outputText value="#{podcastController.podcast.description}"/>
                    <br/>
                    <br/>
                </p:panel>

                <br/>
                <p:media value="/resources/media/#{podcastController.podcast.audio.name}"
                         width="500"
                         height="60"
                         player="quicktime">

                    <f:param name="autoPlay" value="true"/>

                </p:media>

                <br/>
                <br/>

                <p:panel header="Comment Form" id="comment_form">

                    <h:form onsubmit="form.reset()">

                        <h:panelGrid columns="3" cellspacing="10" style="margin-bottom: 5px">

                            <p:outputLabel for="name"
                                           rendered="#{not empty userSession.user}"
                                           value="Username : "/>

                            <p:inputText id="name"
                                         disabled="true"
                                         value="#{userSession.user.username}"
                                         rendered="#{not empty userSession.user}"/>
                            <p:message for="name"
                                       rendered="#{not empty userSession.user}"
                                       styleClass="error"/>

                            <p:outputLabel for="rating" value="Rating : "/>
                            <p:rating id="rating"
                                      value="#{commentAndRatingController.comment.rating}"
                                      required="true"
                                      requiredMessage="Error : Rating is required"/>
                            <p:message for="rating" styleClass="error"/>

                            <p:outputLabel for="comment" value="Comment : "/>
                            <p:inputTextarea rows="3" cols="50"
                                             id="comment"
                                             value="#{commentAndRatingController.comment.comment}"
                                             required="true"
                                             requiredMessage="Error : Comment is required"/>
                            <p:message for="comment" styleClass="error"/>

                        </h:panelGrid>

                        <p:commandButton update=":comment_form, :comment_table"
                                         ajax="false"
                                         value="Add Comment"
                                         action="#{commentAndRatingController.add(podcastController.podcast)}"/>

                    </h:form>

                    <p:messages globalOnly="true"/>

                </p:panel>
                <br/>
                <p:dataTable var="comment"
                             value="#{commentAndRatingController.show(podcastController.podcast.id)}"
                             scrollable="true"
                             scrollHeight="150"
                             id="comment_table">

                    <p:column headerText="Comments">

                        <h:outputText style="font-size: 14px;white-space: normal;"
                                      value="#{comment.comment}"/>

                    </p:column>

                    <p:column headerText="Ratings" width="10%">

                        <p:rating readonly="true"
                                  value="#{comment.rating}"/>

                    </p:column>

                    <p:column headerText="By" width="10%">

                        <h:outputText style="font-size: 12px;"
                                      value="#{comment.user.username}"
                                      rendered="#{not empty comment.user}"/>

                    </p:column>

                    <p:column headerText="Time" width="15%">

                        <h:outputText style="font-size: 12px;"
                                      value="#{comment.dateCreated}"/>

                    </p:column>

                </p:dataTable>

            </div>

        </div>

    </ui:define>

</ui:composition>

</html>